<template>
    <div class="slider" ref="slider" >
        <div class="slider-group" ref="sliderGroup">
            <slot></slot>
        </div>
        <div class="dots">
            <span class="dot" v-for="(item , index) in dots" :key="index" v-bind:class="{active:currentPageIndex==index}"></span>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
import {addClass} from '@/common/js/dom.js'
export default {
    data(){
        return{
            dots:[],
            currentPageIndex:0
        }
    },
    props:{
        loop:{
            type:Boolean,
            default:true
        },
        autoPlay:{
            type:Boolean,
            default:true
        },
        interval:{
            type:Number,
            default:4000
        }
    },
    mounted(){
        setTimeout(() => {
            this._setSliderWidth();
            this._initdots();
            this.initSlider();
            if(this.autoPlay){
                this.play();
            }
        }, 20);
        window.addEventListener('resize',()=>{
            if(!this.slider){
                return
            }
            this._setSliderWidth(true);
            this.slider.refresh();
        })
    },
    methods:{
        _setSliderWidth(isResize){
            this.children=this.$refs.sliderGroup.children;
            let width=0;
            let sliderWidth=this.$refs.slider.clientWidth;
            for(let i=0;i<this.children.length;i++){
                let child=this.children[i];
                addClass(child,'slider-item')
                child.style.width=sliderWidth+'px';
                width+=sliderWidth;
            }
            if(this.loop&&!isResize){
                width+=2*sliderWidth
            }
            this.$refs.sliderGroup.style.width=width+'px'
        },
        initSlider(){
            this.slider=new BScroll(this.$refs.slider,{
                scrollX:true,
                scrollY:false,
                monentum:false,
                snap:true,
                snapLoop:this.loop,
                snapThreshold:0.3,
                snapSpeed:400,
                // click:true
            })
            this.slider.on('scrollEnd',()=>{
                let pageIndex=this.slider.getCurrentPage().pageX;
                if(this.loop){
                    pageIndex-=1;
                }
                this.currentPageIndex=pageIndex;

                if(this.autoPlay){
                    clearTimeout(this.timer)
                    this.play();
                }
            })
        },
        _initdots(){
            this.dots=new Array(this.children.length)
        },
        play(){
            let pageIndex=this.currentPageIndex+1;
            if(this.loop){
                pageIndex+=1;
            }
            this.timer=setTimeout(()=>{
                this.slider.goToPage(pageIndex,0,400)
            },this.interval)
        }
    },
    destroyed(){
        clearTimeout(this.timer)
    }
}
</script>


<style scoped lang="less">
    .slider{
        // height: 150px;
        min-height: 1px;
        position: relative;
        .slider-group{
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            // height: 150px;
            .slider-item{
                float: left;
                box-sizing: border-box;
                overflow: hidden;
                text-align: center;
                a{
                    display: block;
                    width: 100%;
                    height: 100%
                }
                img{
                    width: 100%;
                }
            }
            
        }
        .dots{
                position: absolute;
                right: 0;
                left: 0;
                bottom: 12px;
                text-align: center;
                font-size: 0;
                .dot{
                    display: inline-block;
                    margin: 0 4px;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background-color: #cccccc;

                }
                .active{
                    width: 20px;
                    border-radius: 5px;
                    background-color: #ffffff;
                }
            }
    }
</style>

